<template>
  <!-- 登记历史 -->
  <view class="history-box">
    <view class="history-content" style="">
      <label class="item-title">登记历史</label><label class="macallan-icon mcl-youjiantou" style="font-weight: 600"
        @click="ontoHistory"></label>
    </view>
    <view class="swiper-content">
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
        <template v-for="(i, idx) in historyList">
          <swiperContentItem :itemObj="i" :userOrderLists="userOrderLists" class="scroll-view-item_H" :key="idx"
            @onGetBalloutHistory="onGetBalloutHistory" />
        </template>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import swiperContentItem from "./swiperContentItem.vue";
  export default {
    components: {
      swiperContentItem
    },
    props: {
      historyList: {
        type: Array,
        default: () => [],
      },
      historyTotal: {
        type: Number,
        default: () => 0,
      },
      userOrderLists:{
        type: Array,
        default: () => [],
      }
    },
    data() {
      return {};
    },
    mounted() {
      this.init();
    },
    methods: {
      ontoHistory() {
        uni.navigateTo({
          url: '/pages/customer/recordList',
        })
      },
      init() {

      },
      onGetBalloutHistory() {
        this.$emit('onGetBalloutHistory')
      },
      scroll() {

      }
    },
  };
</script>

<style lang="less">
  .history-box {
    .swiper-content {
      padding-left: 48rpx;
      
    }

    .swiper-item {
      width: 560rpx;
      height: 256rpx;
      flex-shrink: 0;
    }

    .item-status {
      font-family: NotoSansSC-Medium;
      color: #a21215;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
    }

    .scroll-view-item_H {
      display: inline-block;
      width: 560rpx;
      height: 256rpx;
      margin-right: 16rpx;
      // padding: 32rpx;

      .scroll-item {
        display: flex;
        padding: 16rpx 0;
        background-color: #FAFAFA;

        .scroll-item-img {
          width: 168rpx;
          height: 224rpx;
        }
      }

      .scroll-item-details {
        margin: 32rpx 32rpx 32rpx 0;
        flex-direction: column;
        display: flex;
        width: 360rpx;
        // margin-left: 14rpx;

        .item-day {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 9rpx;
        }

        .text-details {
          font-size: 24rpx;
          font-weight: 400;
          color: #000000;
          line-height: 20px;
          height: 40rpx;
          display: inline-block;
          border-bottom: 2rpx solid #000000;
          font-family: NotoSansSC-Medium;
        }
      }
    }

    .history-content {
      margin: 80rpx 0 66rpx 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 48rpx 0;
    }

    .title__bar {
      // position: absolute;
      display: flex;
      justify-content: space-between;
      padding: 0 40rpx;
      align-items: center;
      background-color: #a21215;
      height: 88rpx;
    }

    .item-title {
      font-weight: 500;
      font-size: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: NotoSansSC-Medium;
    }
  }
</style>
